<template>
  <div class="address-container">
    <!-- 主内容区域 -->
    <div class="content">
      <!-- 无地址状态 -->
      <div class="empty-state" v-if="addressList.length === 0">
        <div class="empty-image"></div>
        <div class="empty-text">暂无收货地址~</div>
      </div>

      <!-- 地址列表 -->
      <div class="address-list" v-else>
        <div
          class="address-item"
          v-for="(address, index) in addressList"
          :key="index"
        >
          <!-- 添加右上角的围巾标签 -->
          <div class="ribbon-wrapper">
            <div
              class="ribbon"
              :class="address.is_supplier ? 'ribbon-supplier' : 'ribbon-shop'"
            >
              {{ address.is_supplier ? "供应商" : "店铺" }}
            </div>
          </div>

          <div class="address-info" @click="editAddress(address)">
            <div class="info-row">
              <div class="person-name">{{ address.consignee }}</div>
              <div class="person-phone">{{ address.mobile }}</div>
            </div>
            <div class="address-detail">
              {{ address.province }} {{ address.city }} {{ address.district }}
              {{ address.address }}
            </div>
          </div>
          <div class="address-actions">
            <view
              class="default-radio"
              @click.stop="setDefaultAddress(address)"
              v-if="address.is_supplier"
            >
              <view
                class="radio-circle"
                :class="{ 'radio-active': address.is_default }"
              >
                <view class="radio-inner" v-if="address.is_default"></view>
              </view>
              <text class="default-text">{{
                address.is_default ? "默认地址" : "设为默认"
              }}</text>
            </view>
            <button
              class="action-btn success-btn"
              @click.stop="useAddress(address)"
            >
              使用地址
            </button>
            <button
              class="action-btn edit-btn"
              @click.stop="editAddress(address)"
            >
              编辑
            </button>
            <button
              class="action-btn delete-btn"
              @click.stop="deleteAddress(address)"
            >
              删除
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部添加按钮 -->
    <div class="footer">
      <button class="add-btn" @click="goToAddAddress">+ 添加收货地址</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  getAddressList,
  delAddress,
  setDefaultAddressApi,
} from "@/api/address";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { showToast } from "@/utils/helper";
// 地址列表数据

// 前往添加地址页面
const goToAddAddress = () => {
  uni.navigateTo({
    url: `/pages/address/addressAdd?supplier_shop_id=${supplierShopId.value}`,
  });
};

// 编辑地址
const editAddress = (address) => {
  uni.navigateTo({
    url: `/pages/address/addressAdd?id=${address.id}&supplier_shop_id=${supplierShopId.value}`,
  });
};

// 删除地址
const deleteAddress = (address) => {
  uni.showModal({
    title: "提示",
    content: "确定要删除此地址吗？",
    success: (res) => {
      if (res.confirm) {
        delAddress({ id: address.id }).then((res) => {
          getAddressListData();
          uni.showToast({ title: "删除成功", icon: "success" });
        });
      }
    },
  });
};

// 设置默认地址
const setDefaultAddress = (address) => {
  setDefaultAddressApi({
    id: address.id,
    supplier_shop_id: supplierShopId.value,
  }).then((res) => {
    showToast("设置成功");
    getAddressListData();
  });
};

const addressList = ref([]);
const getAddressListData = async () => {
  const res = await getAddressList({
    supplier_shop_id: supplierShopId.value,
  });
  console.log(res.data);
  addressList.value = res.data;
};

const useAddress = (address) => {
  uni.$emit("useAddress", address);
  uni.navigateBack();
};
const supplierShopId = ref("");
onShow(() => {
  getAddressListData();
});

const isProxy = ref(false);
onLoad((options) => {
  if (options.is_proxy) {
    isProxy.value = true;
    supplierShopId.value = options.supplier_shop_id;
  }
});
</script>

<style scoped>
.address-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f7f7f7;
}

/* 头部导航样式 */
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  background-color: #fff;
  padding: 0 30rpx;
  border-bottom: 1px solid #eee;
}

.back-icon {
  position: absolute;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
}

.arrow-left {
  display: inline-block;
  width: 20rpx;
  height: 20rpx;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
}

.title {
  font-size: 32rpx;
  font-weight: 500;
}

.menu-icon {
  position: absolute;
  right: 100rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-dots {
  position: relative;
  display: flex;
  align-items: center;
}

.menu-dots::before {
  content: "•••";
  font-size: 24rpx;
  letter-spacing: 2rpx;
}

.add-circle {
  position: absolute;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plus {
  position: relative;
}

.plus::before {
  content: "⊕";
  font-size: 40rpx;
}

/* 内容区域样式 */
.content {
  flex: 1;
  padding: 20rpx;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  background-color: #f0f0f0;
  margin-bottom: 30rpx;
  position: relative;
}

.empty-image::before,
.empty-image::after {
  content: "";
  position: absolute;
  background-color: #ddd;
}

.empty-image::before {
  top: 50%;
  left: 20%;
  width: 60%;
  height: 2rpx;
  transform: rotate(45deg);
  transform-origin: center;
}

.empty-image::after {
  top: 50%;
  left: 20%;
  width: 60%;
  height: 2rpx;
  transform: rotate(-45deg);
  transform-origin: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

/* 地址列表样式 */
.address-list {
  margin-bottom: 120rpx;
}

.address-item {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  position: relative;
  overflow: hidden;
}

/* 围巾标签样式 */
.ribbon-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 120rpx;
  height: 120rpx;
  overflow: hidden;
  z-index: 1;
}

.ribbon {
  position: absolute;
  top: 30rpx;
  right: -30rpx;
  width: 160rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  transform: rotate(45deg);
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.ribbon-supplier {
  background-color: #3498db;
}

.ribbon-shop {
  background-color: #ff6b6b;
}

.address-info {
  border-bottom: 1px solid #ececec;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  margin-bottom: 16rpx;
}

.person-name {
  font-size: 30rpx;
  font-weight: 500;
  margin-right: 30rpx;
}

.person-phone {
  font-size: 30rpx;
  color: #333;
}

.address-detail {
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
}

.address-actions {
  display: flex;
  justify-content: flex-end;
}

.action-btn {
  font-size: 24rpx;
  border-radius: 10rpx;
  margin: 0 20rpx;
  background-color: #fff;
}
.set-default-btn {
  background-color: #1989fa;
  color: #fff;
}
.success-btn {
  background-color: #888;
  color: #fff;
}

.edit-btn {
  color: #333;
  border: 1px solid #ddd;
}

.delete-btn {
  color: red;
  border: 1px solid #ddd;
}

/* 底部按钮样式 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20rpx 0;
  background-color: #1989fa;
}

.add-btn {
  width: 100%;
  height: 63rpx;
  line-height: 44rpx;
  background-color: #1989fa;
  color: #fff;
  font-size: 30rpx;
  text-align: center;
}
button::after {
  border: none;
}

.default-radio {
  display: flex;
  align-items: center;
  padding: 8rpx 0;
}

.radio-circle {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}

.radio-active {
  border-color: #1989fa;
}

.radio-inner {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #1989fa;
}

.default-text {
  font-size: 24rpx;
  color: #666;
}
</style>
